<template>
    <div>
        <template>
            <!-- 表格 -->
            <el-table ref="multipleTable" :data="$store.state.shopadd" tooltip-effect="dark" style="width: 100%"
                @selection-change="change">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.product_picture">
                    </template>
                </el-table-column>
                <el-table-column prop="product_name" label="商品名称" width="350">
                </el-table-column>
                <el-table-column prop="product_price" label="单价" width="150">
                </el-table-column>
                <el-table-column label="数量" width="180">
                    <template slot-scope="scope">
                        <el-input-number size="small" v-model="scope.row.num" @change="step" :min="1" :max="10"
                            label="描述文字">
                        </el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="小计" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.num*scope.row.product_price}}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" circle @click="exit(scope.row.product_id)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <table>
                <tr height="51">
                    <td width="100" @click="gotolist">继续购物</td>
                    <td width="100">共 {{allLength}} 件商品</td>
                    <td width="200">已选择 {{selLength}} 件商品</td>
                    <td width="600" class="hj">合计：<span :style="{fontSize:'20px',paddingRight:'30px',color:'rgb(255, 120, 9)'}">{{sum}}元</span></td>
                    <td width="160" class="qjs">去结算</td>
                </tr>
            </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                sum:0,
                selLength:0,
            };
        },
        mounted() {},
        methods: {
            exit(id) {
                this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.commit("exit", id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 复选框勾选时触发，计算已选中的数量及总价
            change(val) {
                this.sum=0,
                this.selLength=0,
                val.forEach((item)=>{
                    this.sum += item.num * item.product_price
                    this.selLength += item.num
                })
            },
            // 步进器
            step(){
                this.$store.commit("step")
            },
            // 继续购物
            gotolist(){
                this.$router.push({path:'/shoplist'})
            },

        },
        // 计算属性，计算购物车内全部商品数量
        computed:{
            allLength(){
                var length=0
                this.$store.state.shopadd.forEach((item)=>{
                    length += item.num
                })
                return length
            }
        },
        beforeRouteEnter(to, from, next) {
            next((car) => {
                if (car.$store.state.name) {
                    next()
                } else {
                    next("/home")
                }
            })
        }
    };
</script>

<style lang='scss'>
    img {
        width: 90%;
    }
    .hj{
        text-align: right;
    }
    .qjs{
        background-color: rgb(255, 120, 9);
        text-align: center;
        color: #fff;
    }
</style>